<template>
  <div class="ScaleItemBox" ref="ScaleItemBox">
    <iframe
      ref="myIframe"
      :src="iframeSrc"
      frameborder="0"
      :style="{
        width: '1920px',
        height: `calc( 400px / ${scale})`,
        transform: `scale(${scale})`,
      }"
    ></iframe>
  </div>
</template>
<script>
export default {
  name: "ScaleIframe",
  props: {
    iframeSrc: {
      type: String,
      default:
        "http://localhost:8080/#/package/pagestyle?title=element%20%E6%A0%B7%E5%BC%8F",
    },
  },
  data() {
    return {
      scale: "1",
      width: 1920,
      height: 1080,
    };
  },
  mounted() {
    // this.setScale();
    // window.addEventListener("resize", this.debounce(this.setScale, 100));

    this.listenerIframeLoad()
  },
  methods: {
    // 监听 iframe 加载完成
    listenerIframeLoad() {
      this.$nextTick(() => {
        const iframeWin = this.$refs.myIframe;
        if (iframeWin.attachEvent) {
          iframeWin.attachEvent("onload", () => {
            console.log("iframe加载完成");
            this.getIframeHeight();
          });
        } else {
          iframeWin.onload = () => {
            console.log("iframe加载完成");
            this.getIframeHeight();
          };
        }
      });
    },
    getIframeHeight() {
      console.log("myIframe", this.$refs.myIframe);
      console.log("myIframe winodw", this.$refs.myIframe.contentWindow);
      console.log(
        "myIframe winodw app",
        this.$refs.myIframe.contentWindow.document.getElementById("app")
      );
      console.log(
        "myIframe winodw page_box",
        this.$refs.myIframe.contentWindow.document.getElementsByClassName(
          "page_box"
        )
      );
      const iframeAppDom =
        this.$refs?.myIframe?.contentWindow?.document?.getElementById("app");
      if (iframeAppDom) {
        iframeAppDom.style.width = `1920px`;
        iframeAppDom.style.height = `1080px`;
        // 获取iframe 的宽高
        const iframeWidth = iframeAppDom.clientWidth;
        const iframeHeight = iframeAppDom.clientHeight;
        console.log("iframeWidth", iframeWidth);
        console.log("iframeHeight", iframeHeight);

        console.log("iframe 子节点", iframeAppDom.children);

        // 获取父节点宽高
        const parentDom = this.$refs.ScaleItemBox;
        const parentWidth = parentDom.clientWidth;
        const parentHeight = parentDom.clientHeight;
        console.log("父盒子宽度", parentWidth);
        console.log("父盒子高度", parentHeight);

        const widthScale = parentWidth / iframeWidth;
        const heightScale = parentHeight / iframeHeight;

        // const widthScale =   iframeWidth/parentWidth;
        // const heightScale =  iframeHeight/parentHeight;
        console.log("宽度适配比例:", widthScale);
        console.log("高度适配比例:", heightScale);
        // 得到最小适配比例
        const scale = widthScale > heightScale ? heightScale : widthScale;
        console.log("最小适配比例 ", scale);
        this.scale = scale;

        // iframeAppDom.style.transform =`scale(${scale})`;
        // iframeAppDom.style.transformOrigin =`0`;

        // this.$refs.page_item.style.setProperty("--scale", scale);
      }
    },
    getScale() {
      let { width, height } = this;
      let wh = window.innerHeight / height;
      let ww = window.innerWidth / width;
      console.log(ww < wh ? ww : wh);
      return ww < wh ? ww : wh;
    },
    setScale() {
      if (window.innerHeight == 1080) {
        this.height = 1080;
      } else {
        this.height = 937;
      }
      this.scale = this.getScale();
      if (this.$refs.ScaleItemBox) {
        this.$refs.ScaleItemBox.style.setProperty("--scale", this.scale);
      }
    },
    debounce(fn, delay) {
      let delays = delay || 500;
      let timer;
      return function () {
        let th = this;
        let args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(function () {
          timer = null;
          fn.apply(th, args);
        }, delays);
      };
    },
  },
  beforeDestroy() {
    removeEventListener("resize", this.debounce);
  },
};
</script>
<style lang="scss" scoped>
// #ScaleItemBox {
//   --scale: 1;
// }
// .ScaleItemBox {
//   position: absolute;
//   transform: scale(var(--scale)) translate(-50%, -50%);
//   display: flex;
//   flex-direction: column;
//   transform-origin: 0 0;
//   left: 50%;
//   top: 50%;
//   transition: 0.3s;
//   z-index: 999;
// }

.ScaleItemBox {
  width: 100%;
  height: 100%;
//   background-color: red;
  iframe {
    transform-origin: 0 0;
  }
}
</style>
